<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>Personal</title>
	<link rel="stylesheet" type="text/css" href="style/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="style/index.css">
</head>
<body>
<div class="header">
	<div class="container">
		<h1>Vicky</h1>
		<nav class="pull-right header-nav">
			<div class="navbar-collapse">
				<ul class="nav navbar-nav">
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
		</nav>
	</div>
</div>
<div class="main">
	<div class="container">
		<div class="row">
			<div class="scale">
				<h2>Scale</h2>
			</div>
			<div class="col-md-4 col-sm-4 row1">
				<a class="trans1">
					<div class="trans1-img">
						<img src="images/trans1.jpg" alt="" />
					</div>
					<h3>Bridge</h3>
				</a>
			</div>
			<div class="col-md-4 col-sm-4 row1">
				<a class="trans1">
					<div class="trans1-img">
						<img src="images/trans2.jpg" alt="" />
					</div>
					<h3>Bridge</h3>
				</a>
			</div>
			<div class="col-md-4 col-sm-4 row1">
				<a class="trans1">
					<div class="trans1-img">
						<img src="images/trans3.jpg" alt="" />
					</div>
					<h3>Bridge</h3>
				</a>
			</div>
		</div>
		<div class="row">
			<div class="scale">
				<h2>Macro Photography</h2>
			</div>
			<div class="col-md-4 col-sm-4 row1 macro">
				<a class="trans1">
					<div class="trans1-img">
						<img src="images/macro1.jpg" alt="" />
					</div>
					<h3>Macro</h3>
				</a>
			</div>
			<div class="col-md-4 col-sm-4 row1 macro">
				<a class="trans1">
					<div class="trans1-img">
						<img src="images/macro2.jpg" alt="" />
					</div>
					<h3>Photography</h3>
				</a>
			</div>
			<div class="col-md-4 col-sm-4 row1 macro">
				<a class="trans1">
					<div class="trans1-img">
						<img src="images/macro3.jpg" alt="" />
					</div>
					<h3>Macro</h3>
				</a>
			</div>
		</div>

		<div class="row">
			<div class="scale">
				<h2>Animation</h2>
			</div>
			<div class="col-md-4 col-sm-4">
				<div class="ani">
					<div class="location"></div>
				</div>
			</div>
			<div class="col-md-4 col-sm-4">
				<div class="ani">
					<div class="help"></div>
				</div>
			</div>
			<div class="col-md-4 col-sm-4">
				<div class="ani">
					<div class="me"></div>
				</div>
			</div>
			
		</div>
		
	</div>
</div>
<div class="footer">
	
</div>
<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
	var macroW = $('.macro a').width();
		$('.macro a .trans1-img img').css("width",macroW+10+"px");
</script>
</body>
</html>